<html>
   <head>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   
      <title>3.2. Breve gu&iacute;a para crear una pantalla</title>
      <meta name="generator" content="DocBook XSL-NS Stylesheets V1.75.2">
      <link rel="home" href="indice.html" title="Manual Usuario gvHidra">
      <link rel="up" href="ch03.html" title="Cap&iacute;tulo 3. Elementos b&aacute;sicos">
      <link rel="prev" href="ch03.html" title="Cap&iacute;tulo 3. Elementos b&aacute;sicos">
      <link rel="next" href="ch03s03.html" title="3.3. Men&uacute; de una aplicaci&oacute;n">
   </head>
   <body bgcolor="white" text="black" link="#0000FF" vlink="#840084" alink="#0000FF">
      <div class="navheader">
         <table width="100%" summary="Navigation header">
            <tr>
               <th colspan="3" align="center">3.2. Breve gu&iacute;a para crear una pantalla</th>
            </tr>
            <tr>
               <td width="20%" align="left"><a accesskey="p" href="ch03.html">Anterior</a>&nbsp;
               </td>
               <th width="60%" align="center">Cap&iacute;tulo 3. Elementos b&aacute;sicos</th>
               <td width="20%" align="right">&nbsp;<a accesskey="n" href="ch03s03.html">Siguiente</a></td>
            </tr>
         </table>
         <hr>
      </div>
      <div class="section" title="3.2. Breve gu&iacute;a para crear una pantalla">
         <div class="titlepage">
            <div>
               <div>
                  <h2 class="title" style="clear: both"><a name="d4e1026"></a>3.2. Breve gu&iacute;a para crear una pantalla
                  </h2>
               </div>
            </div>
         </div>
             
         
             
         <div class="section" title="3.2.1. Introducci&oacute;n">
            <div class="titlepage">
               <div>
                  <div>
                     <h3 class="title"><a name="d4e1028"></a>3.2.1. Introducci&oacute;n
                     </h3>
                  </div>
               </div>
            </div>
                  
            
                  
            <p>A continuaci&oacute;n vamos a explicar los pasos a seguir para crear una
                     pantalla. Antes de llegar a este punto se tiene que tener claro el tipo
                     de pantalla que se quiere crear.
            </p>
            
                  
            <p>Dependiendo del tipo de ventana seleccionado, el contenido de los
                     ficheros ser&aacute; diferente. En el directorio igep/doc/plantillasTipo hay un
                     modelo base a seguir de cada uno de los ficheros. En la siguiente tabla
                     aparecen los diferentes patrones con los nombres de ficheros que
                     deberemos buscar.
            </p>
            
                  
            <div class="informaltable"><a name="tiposPantalla"></a>
                       
               <table border="1">
                  <colgroup>
                     <col width="300" align="left">
                     <col width="150" align="left">
                  </colgroup>
                  <thead>
                     <tr>
                        <th align="center">patr&oacute;n</th>
                        <th align="center">plantilla</th>
                     </tr>
                  </thead>
                  <tbody>
                     <tr>
                        <td align="left">Patr&oacute;n Tabular / Tabular sin b&uacute;squeda</td>
                        <td align="left">P1M2(FIL-LIS)</td>
                     </tr>
                     <tr>
                        <td align="left">Patr&oacute;n Tabular sin b&uacute;squeda</td>
                        <td align="left">P1M1(LIS)</td>
                     </tr>
                     <tr>
                        <td align="left">Patr&oacute;n Registro</td>
                        <td align="left">P1M2(FIL-EDI)</td>
                     </tr>
                     <tr>
                        <td align="left">Patr&oacute;n Registro sin b&uacute;squeda</td>
                        <td align="left">P1M1(EDI)</td>
                     </tr>
                     <tr>
                        <td align="left">Patr&oacute;n Tabular-Registro</td>
                        <td align="left">P1M2(FIL-LIS-EDI)</td>
                     </tr>
                     <tr>
                        <td align="left">Patr&oacute;n MD Maestro Tabular - Detalle Registro</td>
                        <td align="left">P2M2(FIL-LIS)M1(EDI)</td>
                     </tr>
                     <tr>
                        <td align="left">Patr&oacute;n MD Maestro Registro - Detalle Registro</td>
                        <td align="left">P2M2(FIL-EDI)M1(EDI)</td>
                     </tr>
                     <tr>
                        <td align="left">Patr&oacute;n MD Maestro Registro - Detalle Tabular</td>
                        <td align="left">P2M2(FIL-EDI)M1(LIS)</td>
                     </tr>
                     <tr>
                        <td align="left">Patr&oacute;n MD Maestro Registro - Detalle
                                         Tabular-Registro
                        </td>
                        <td align="left">P2M2(FIL-EDI)M1(LIS-EDI)</td>
                     </tr>
                     <tr>
                        <td align="left">Patr&oacute;n &Aacute;rbol</td>
                        <td class="auto-generated">&nbsp;</td>
                     </tr>
                  </tbody>
               </table>
                     
            </div>
            
                  
            <p>gvHidra est&aacute; basado en la arquitectura MVC, por tanto al crear una
                     pantalla tenemos que crear y modificar varios ficheros que controlen las
                     diferentes partes de la arquitectura:
            </p>
            
                  
            <div class="itemizedlist">
               <ul class="itemizedlist" type="disc">
                  <li class="listitem">
                               
                     <p>Fichero/s del <span class="bold"><strong>Modelo</strong></span>
                                  (directorio <span class="emphasis"><em>actions</em></span>): se crear&aacute; un fichero que
                                  controla toda la l&oacute;gica de negocio del panel.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p>Fichero de la <span class="bold"><strong>Vista</strong></span>
                                  (directorios <span class="emphasis"><em>views</em></span> y
                                  <span class="emphasis"><em>plantillas</em></span>): se crear&aacute;n unos ficheros que, por
                                  un lado controlan la interfaz antes de presentar los datos, y por
                                  otro lado, la distribuci&oacute;n de los componentes en la pantalla.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p>Fichero de <span class="bold"><strong>Controlador</strong></span>
                                  (ficheros <span class="emphasis"><em>mappings.php</em></span> y
                                  <span class="emphasis"><em>menuModulos.xml</em></span>): se modificar&aacute;n estos ficheros
                                  para indicar qu&eacute; acci&oacute;n se resuelve con qu&eacute; clase.
                     </p>
                             
                  </li>
               </ul>
            </div>
            
                  
            <p>Dentro del modelo, cabe tener en cuenta que el programador
                     interactur&aacute; con el usuario a trav&eacute;s de dos flujos: <span class="bold"><strong>flujo de entrada</strong></span> y <span class="bold"><strong>flujo de
                           salida</strong></span>. El <span class="bold"><strong>flujo de entrada</strong></span>
                     se compone de la informaci&oacute;n que viene de la pantalla y se gestiona
                     con:
            </p>
            
                  
            <div class="itemizedlist">
               <ul class="itemizedlist" type="disc">
                  <li class="listitem">
                               
                     <p><span class="emphasis"><em>Tablas de trabajo</em></span>: Son las tablas con las
                                  que el framework va a trabajar. Es decir, las tablas sobre las que
                                  vamos a realizar operaciones con los datos que recibamos.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="emphasis"><em>Matching</em></span>: Este m&eacute;todo nos sirve para
                                  indicarle al framework en que se traduce cierto campo de la
                                  pantalla. Se utiliza &uacute;nicamente en los flujos de entrada:
                                  construcci&oacute;n de la where de la operaci&oacute;n, del Insert, Update,
                                  ...
                     </p>
                             
                  </li>
               </ul>
            </div>
            
                  
            <p>El <span class="bold"><strong>flujo de salida</strong></span> se compone de
                     la informaci&oacute;n a mostrar por pantalla y se gestiona a trav&eacute;s de las
                     consultas que definimos en el constructor de la clase:
            </p>
            
                  
            <div class="itemizedlist">
               <ul class="itemizedlist" type="disc">
                  <li class="listitem">
                               
                     <p><span class="emphasis"><em>SearchQuery</em></span>: es la consulta que se
                                  lanzar&aacute; al ejecutar la acci&oacute;n "buscar".
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p><span class="emphasis"><em>EditQuery</em></span>: es la consulta que se lanzar&aacute;
                                  al ejecutar la acci&oacute;n "editar".
                     </p>
                             
                  </li>
               </ul>
            </div>
            
                  
            <p>Conviene refrescar estos dos conceptos una vez concluido el
                     siguiente ejemplo.
            </p>
                
         </div>
         
             
         <div class="section" title="3.2.2. Genaro: Generaci&oacute;n autom&aacute;tica en gvHidra">
            <div class="titlepage">
               <div>
                  <div>
                     <h3 class="title"><a name="d4e1107"></a>3.2.2. Genaro: Generaci&oacute;n autom&aacute;tica en gvHidra
                     </h3>
                  </div>
               </div>
            </div>
                  
            
                  
            <p>Desde las versiones 3.1.x, gvHidra cuenta con una herramienta de
                     generaci&oacute;n de c&oacute;digo que nos permite generar de forma sencilla y r&aacute;pida
                     un mantenimiento. Esta herramienta, Genaro, a trav&eacute;s de 5 par&aacute;metros
                     b&aacute;sicos, se conecta a la base de datos y construye una ventana
                     funcional. Los mantenimientos tienen la l&oacute;gica necesaria para realizar
                     la gesti&oacute;n de b&uacute;squeda, altas, bajas y modificaciones al 100%; pero no
                     tienen l&oacute;gica espec&iacute;fica de la aplicaci&oacute;n (validaciones
                     espec&iacute;ficas,...). Por esta raz&oacute;n, en la mayor&iacute;a de los casos, debe
                     entenderse como un punto de partida para nuestras ventanas.
            </p>
            
                  
            <div class="section" title="3.2.2.1. &iquest;Qu&eacute; genera?">
               <div class="titlepage">
                  <div>
                     <div>
                        <h4 class="title"><a name="d4e1110"></a>3.2.2.1. &iquest;Qu&eacute; genera?
                        </h4>
                     </div>
                  </div>
               </div>
                       
               
                       
               <p>La versi&oacute;n actual del genaro realiza por nosotros la generaci&oacute;n
                          de los siguientes ficheros:
               </p>
               
                       
               <div class="itemizedlist">
                  <ul class="itemizedlist" type="disc">
                     <li class="listitem">
                                    
                        <p>actions: genera las clases manejadoras (1 o N dependiendo
                                       del patr&oacute;n). Estas clases tienen las consultas, las asociaciones
                                       con los campos, las asociaciones entre los maestros y sus detalles
                                       (en el caso de estos patrones) y los tipos de datos (con las
                                       validaciones de los mismos).
                        </p>
                                  
                     </li>
                     <li class="listitem">
                                    
                        <p>views: genera el fichero de la vista.</p>
                                  
                     </li>
                     <li class="listitem">
                                    
                        <p>plantillas: genara la plantilla tpl de la ventana.</p>
                                  
                     </li>
                     <li class="listitem">
                                    
                        <p>include: edita el fichero include para incluir en el
                                       proyecto las nuevas clases.
                        </p>
                                  
                     </li>
                     <li class="listitem">
                                    
                        <p>mappings: edita el fichero de mapeos para asociar las
                                       acciones con la clase que las gestiona (las nuevas clases
                                       manejadoras).
                        </p>
                                  
                     </li>
                     <li class="listitem">
                                    
                        <p>menuModulos.xml: edita el menu para que aparezca la nueva
                                       entrada. Agrupa esta entrada por el m&oacute;dulo.
                        </p>
                                  
                     </li>
                  </ul>
               </div>
                     
            </div>
            
                  
            <div class="section" title="3.2.2.2. &iquest;C&oacute;mo lo instalo?">
               <div class="titlepage">
                  <div>
                     <div>
                        <h4 class="title"><a name="d4e1126"></a>3.2.2.2. &iquest;C&oacute;mo lo instalo?
                        </h4>
                     </div>
                  </div>
               </div>
                       
               
                       
               <p>En primer lugar tenemos que descargar el paquete de la web de
                          gvHidra:
               </p>
               
                       
               <div class="itemizedlist">
                  <ul class="itemizedlist" type="disc">
                     <li class="listitem">
                                    
                        <p><a class="link" href="">Desde
                                          la p&aacute;gina de gvHidra (www.gvhidra.org)</a></p>
                                  
                     </li>
                  </ul>
               </div>
               
                       
               <p>Una vez descargado, lo dejamos en el directorio include de
                          nuestra aplicaci&oacute;n gvHidra. Si no tenemos aun la estructura de la
                          misma consultar el punto "Instalaci&oacute;n del entorno" en este mismo
                          manual.
               </p>
               
                       
               <p>El genaro, recoge la informaci&oacute;n de las conexiones de nuestra
                          aplicaci&oacute;n, por lo que necesitamos que est&eacute;n definidas en el fichero
                          gvHidraConfig.inc.xml de la aplicaci&oacute;n (ubicado en la raiz del
                          proyecto).
               </p>
               
                       
               <p>Una vez definidas, debemos acceder a la herramienta
                          http://&lt;ubicacionAplicacion&gt;/include/genaro. Por comodidad, se
                          recomienda a&ntilde;adir esta entrada de menu en el menu de herramientas. Al
                          acceder a esta url nos aparecer&aacute; el siguiente formulario.
               </p>
               
                       
               <div class="mediaobject" align="center"><img src="images/genaroPantallaInicial.png" align="middle"></div>
               
                       
               <p>Finalmente, para poder utilizar la herramienta tenemos que dar
                          una serie de permisos de lectura/escritura ya que va a ficheros en
                          nuestra estructura. Por ello, se debe dar permisos de
                          lectura/escritura al usuario del servidor web (generalmente el usuario
                          de Apache) a todo nuestro proyecto.
               </p>
               
                       
               <p><span class="bold"><strong>NOTA IMPORTANTE:</strong></span> Por seguridad,
                          tanto el tema de permisos como el acceso a esta herramienta deben
                          revisarse antes de sacar a producci&oacute;n. Se trata de una herramienta de
                          desarrollo y SOLO deber&iacute;a estar disponible en dichos entornos.
               </p>
                     
            </div>
            
                  
            <div class="section" title="3.2.2.3. &iquest;C&oacute;mo utilizarlo?">
               <div class="titlepage">
                  <div>
                     <div>
                        <h4 class="title"><a name="d4e1143"></a>3.2.2.3. &iquest;C&oacute;mo utilizarlo?
                        </h4>
                     </div>
                  </div>
               </div>
                       
               
                       
               <p>En primer lugar, tenemos que escoger la conexi&oacute;n de base de
                          datos que queremos utilizar. Para ello, en el desplegable de la parte
                          superior derecha (al lado de las solapa de Patr&oacute;n Maestro detalle),
                          seleccionamos el dsn deseado. Los ids que aparecen, son los que hemos
                          configurado en nuestra aplicaci&oacute;n.
               </p>
               
                       
               <p>Una vez seleccionada la conexi&oacute;n, debemos decidir si vamos a
                          generar un patr&oacute;n simple o un patr&oacute;n maestro detalle. Vamos a revisar
                          cada una de las ventanas.
               </p>
               
                       
               <p>Para genarar un patr&oacute;n simple tenemos la siguiente
                          ventana
               </p>
               
                       
               <div class="mediaobject" align="center"><img src="images/genaroPatronSimple.png" align="middle"></div>
               
                       
               <p>Debemos indicar los siguientes par&aacute;metros:</p>
               
                       
               <div class="itemizedlist">
                  <ul class="itemizedlist" type="disc">
                     <li class="listitem">
                                    
                        <p>Nombre del m&oacute;dulo: es un agrupador de mantenimientos. Nos
                                       permite agrupar los mantenimiento de nuestra aplicaci&oacute;n de forma
                                       que sea m&aacute;s sencillo su manejo.
                        </p>
                                  
                     </li>
                     <li class="listitem">
                                    
                        <p>Clase Manejadora: el nombre de la clase.</p>
                                  
                     </li>
                     <li class="listitem">
                                    
                        <p>Tabla de la bd: tabla sobre la que queremos realizar el
                                       mantenimiento.
                        </p>
                                  
                     </li>
                     <li class="listitem">
                                    
                        <p>Patr&oacute;n: seleccionamos la forma de visulizaci&oacute;n de la
                                       informaci&oacute;n (Tabular, Registro o Tabular-Registro).
                        </p>
                                  
                     </li>
                  </ul>
               </div>
               
                       
               <p>Pulsamos generar y aparece la siguiente ventana:</p>
               
                       
               <div class="mediaobject" align="center"><img src="images/genaroPatronSimpleGenerado.png" align="middle"></div>
               
                       
               <p>Vamos a nuestra aplicaci&oacute;n. Entramos de nuevo desde la
                          validaci&oacute;n (es importante porque borramos caches y cookies). Vemos que
                          se ha creado una nueva entrada de men&uacute; y el resultado ser&aacute; algo como
                          esto:
               </p>
               
                       
               <div class="mediaobject" align="center"><img src="images/genaroPatronSimpleResultado.png" align="middle"></div>
               
                       
               <p>Nota: recomendamos ver en el c&oacute;digo fuente todos los ficheros
                          generados para entender la estructura del c&oacute;digo.
               </p>
               
                       
               <p>Para generar patrones maestro detalle tenemos la siguiente
                          ventana
               </p>
               
                       
               <div class="mediaobject" align="center"><img src="images/genaroPatronMD.png" align="middle"></div>
               
                       
               <p>Debemos indicar los siguientes par&aacute;metros:</p>
               
                       
               <div class="itemizedlist">
                  <ul class="itemizedlist" type="disc">
                     <li class="listitem">
                                    
                        <p>Nombre del m&oacute;dulo: es un agrupador de mantenimientos. Nos
                                       permite agrupar los mantenimientos de nuestra aplicaci&oacute;n de forma
                                       que sea m&aacute;s sencillo su manejo.
                        </p>
                                  
                     </li>
                     <li class="listitem">
                                    
                        <p>Seccion Maestro:</p>
                        
                                    
                        <div class="itemizedlist">
                           <ul class="itemizedlist" type="circle">
                              <li class="listitem">
                                                 
                                 <p>Clase Manejadora: el nombre de la clase del
                                                    maestro
                                 </p>
                                               
                              </li>
                              <li class="listitem">
                                                 
                                 <p>Tabla: tabla de la base de datos del maestro.</p>
                                               
                              </li>
                              <li class="listitem">
                                                 
                                 <p>Clave Primaria: campos que componen la clave primaria
                                                    del maestro.
                                 </p>
                                               
                              </li>
                              <li class="listitem">
                                                 
                                 <p>Patr&oacute;n: Seleccionamos la forma de visualizaci&oacute;n del
                                                    maestro (Tabular o Registro).
                                 </p>
                                               
                              </li>
                              <li class="listitem">
                                                 
                                 <p>Numero de detalles: n&uacute;mero de detalles que va a tener
                                                    nuestra ventana.
                                 </p>
                                               
                              </li>
                           </ul>
                        </div>
                                  
                     </li>
                     <li class="listitem">
                                    
                        <p>Seccion Detalle:</p>
                        
                                    
                        <div class="itemizedlist">
                           <ul class="itemizedlist" type="circle">
                              <li class="listitem">
                                                 
                                 <p>Clase Manejadora: el nombre de la clase del
                                                    detalle
                                 </p>
                                               
                              </li>
                              <li class="listitem">
                                                 
                                 <p>Tabla: tabla de la base de datos del detalle.</p>
                                               
                              </li>
                              <li class="listitem">
                                                 
                                 <p>Clave Ajena: campos que relacionan la tabla con el
                                                    maestro. Corresponde con los campos que son clave ajena
                                                    referenciada a los campos de la clave primaria de la tabla
                                                    maestro. Si son varios, debe respetarse el orden que se ha
                                                    indicado en el maestro.
                                 </p>
                                               
                              </li>
                              <li class="listitem">
                                                 
                                 <p>Patr&oacute;n del detalle: Seleccionamos la forma de
                                                    visualizaci&oacute;n del detalle (Tabular, Registro o
                                                    Tabular-Registro).
                                 </p>
                                               
                              </li>
                           </ul>
                        </div>
                                  
                     </li>
                  </ul>
               </div>
               
                       
               <p>Pulsamos generar y aparece la siguiente ventana</p>
               
                       
               <div class="mediaobject" align="center"><img src="images/genaroPatronMDGenerado.png" align="middle"></div>
               
                       
               <p>Vamos a nuestra aplicaci&oacute;n. Entramos de nuevo desde la
                          validaci&oacute;n (es importante porque borramos caches y cookies). Vemos que
                          se ha creado una nueva entrada de men&uacute; y el resultado es el
                          siguiente:
               </p>
               
                       
               <div class="mediaobject" align="center"><img src="images/genaroPatronMDResultado.png" align="middle"></div>
                     
            </div>
                
         </div>
         
             
         <div class="section" title="3.2.3. Creaci&oacute;n de un mantenimiento de forma manual">
            <div class="titlepage">
               <div>
                  <div>
                     <h3 class="title"><a name="d4e1216"></a>3.2.3. Creaci&oacute;n de un mantenimiento de forma manual
                     </h3>
                  </div>
               </div>
            </div>
                  
            
                  
            <p><a name="C3PasoAPaso"></a>Vamos a hacer un peque&ntilde;o recorrido sobre como
                     crear una pantalla de forma manual. Esto puede ser de mucha utilidad
                     para todos los que estan empezando, para aprender la estructura del
                     proyecto.
            </p>
            
                  
            <div class="orderedlist">
               <ol class="orderedlist" type="1">
                  <li class="listitem">
                               
                     <p>En primer lugar tenemos que saber que tipo de pantalla
                                  necesitamos (<a class="link" href="ch03s02.html#tiposPantalla">ver tabla
                                     anterior</a>), con ello sabremos exactamente cuantos ficheros
                                  necesitamos para la parte de <span class="emphasis"><em>control de negocio</em></span>
                                  (directorio <span class="emphasis"><em>actions</em></span>). Este fichero php (de aqu&iacute;
                                  en adelante le llamaremos <span class="bold"><strong>clase
                                        manejadora</strong></span>) ser&aacute; el que controlar&aacute; la l&oacute;gica de negocio,
                                  toda ella o puede compartirla apoy&aacute;ndose en clases de negocio
                                  adicionales cuando la aplicaci&oacute;n lo requiera. Estas clases
                                  adicionales, por organizaci&oacute;n, las localizaremos en un directorio
                                  llamado <span class="emphasis"><em>class</em></span> al nivel de actions.
                     </p>
                     
                               
                     <p>Los patrones los clasificamos en dos, simples y complejos. En
                                  los primeros entra el patr&oacute;n tabular, patr&oacute;n registro y el
                                  tabular-registro, y en los segundos, los maestro-detalle y el &aacute;rbol.
                                  Esta diferencia se basa en que para los simples solamente es
                                  necesaria una clase manejadora, y para los complejos es necesaria
                                  m&aacute;s de una. Concretamente, en los maestro-detalle necesitaremos una
                                  clase manejadora para el maestro y una por cada detalle que
                                  tengamos, y para el &aacute;rbol, se necesitar&aacute; una por cada opci&oacute;n que
                                  vaya a tener el men&uacute; lateral.
                     </p>
                     
                               
                     <p>La clase manejadora heredar&aacute; de <span class="bold"><strong>gvHidraForm_DB</strong></span>, que contiene el
                                  comportamiento general de un mantenimiento com&uacute;n (inserciones,
                                  modificaciones y borrados) contra un SGBD relacional. Un ejemplo
                                  tipo de para un patr&oacute;n Tabular podr&iacute;a ser el siguiente:
                     </p>
                     
                               
                     <div class="informalexample">
                                    <pre class="programlisting">&lt;?php

/* CLASE MANEJADORA */

class TinvEstados extends <span class="bold"><strong>gvHidraForm_DB</strong></span> 
{

   public function __construct() 
   {

      /*manejador de conexi&oacute;n*/
      $conf = <span class="bold"><strong>ConfigFramework::getConfig()</strong></span>;
      // dsnAplicacion: ser&aacute; el que se haya definido en gvHidraConfig.xml
      $dsn = $conf-&gt;<span class="bold"><strong>getDSN</strong></span>('dsnAplicacion');

      //Las tablas sobre las que trabaja
      $nombreTablas= array('tinv_estados');
      parent::__construct($dsn,$nombreTablas);

      //La select que mostramos
      $this-&gt;<span class="bold"><strong>setSelectForSearchQuery</strong></span>("SELECT cestado as \"lisCodigoEstado\", 
                                                 destado as \"lisDescEstado\" FROM tinv_estados");
      //El orden de presentaci&oacute;n de los datos
      $this-&gt;<span class="bold"><strong>setOrderByForSearchQuery</strong></span>("cestado");

      /* A&ntilde;adimos los Matching - Correspondecias elemento TPL &lt;-&gt; campo de BD */
      $this-&gt;<span class="bold"><strong>addMatching</strong></span>("filCodigoEstado","cestado","tinv_estados");
      $this-&gt;<span class="bold"><strong>addMatching</strong></span>("filDescEstado","destado","tinv_estados");

      $this-&gt;<span class="bold"><strong>addMatching</strong></span>("lisCodigoEstado","cestado","tinv_estados");
      $this-&gt;<span class="bold"><strong>addMatching</strong></span>("lisDescEstado","destado","tinv_estados");
   }
}
?&gt;</pre>
                                  </div>
                     
                               
                     <p>Del contenido de la clase podemos destacar:</p>
                     
                               
                     <div class="itemizedlist">
                        <ul class="itemizedlist" type="disc">
                           <li class="listitem">
                                            
                              <p>La clase hereda de <span class="bold"><strong>gvHidraForm_DB</strong></span> (l&iacute;nea 5). Esto se debe a
                                               que, tal y como hemos comentado, dicha clase es la que nos
                                               proporciona el comportamiento gen&eacute;rico de gvHidra en relaci&oacute;n a
                                               las acciones contra una BBDD relacional. En otros casos se puede
                                               heredar directamente de <span class="bold"><strong>gvHidraForm</strong></span>.
                              </p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p>Una vez en el constructor debemos indicar la fuente de
                                               datos (l&iacute;neas 12-13). Primero cargamos el fichero (<span class="bold"><strong>gvHidraConfig.inc.xml</strong></span>) de configuraci&oacute;n
                                               del framework, del custom y el de la propia aplicaci&oacute;n. De esa
                                               configuraci&oacute;n que nos ofrece el fichero cargamos el dsn que
                                               hemos definido para la aplicaci&oacute;n, en la variable
                                               <span class="emphasis"><em>$dsn</em></span> tendremos una referencia a la fuente
                                               de datos sobre la que se quiere trabajar. Si tenemos m&aacute;s de una
                                               fuente de datos, ver el cap&iacute;tulo <a class="link" href="ch05.html#C5BBDD">Fuente
                                                  de datos</a>.
                              </p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p>Debemos llamar al constructor del padre (l&iacute;nea 17) e
                                               instanciar una serie de propiedades que marcar&aacute;n el
                                               comportamiento del panel. Se le pasa como par&aacute;metro la conexi&oacute;n
                                               definida anteriormente y el nombre de las tablas que va a
                                               mantener el panel ($nombreTablas en el ejemplo).
                              </p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p><a name="busqueda"></a>Debemos inicializar la consulta de la base
                                               de datos mediante el m&eacute;todo <span class="bold"><strong>setSelectForSearchQuery()</strong></span>. Es importante
                                               que en la select los nombres de los campos correspondan con los
                                               que luego utilizaremos en la plantilla (fichero tpl) En el
                                               ejemplo se utilizan alias para asegurar esa concordancia de
                                               nombres, esta es una medida aconsejable para evitar
                                               confusiones.
                              </p>
                              
                                            
                              <p><span class="emphasis"><em> NOTA: Ver que el alias se ha
                                                     definido con un prefijo "lis" porque estamos en un patr&oacute;n
                                                     Tabular, la consulta nos devolver&aacute; los datos que se mostrar&aacute;n en
                                                     el tabular. Aconsejamos el uso de esta notaci&oacute;n, prefijo "fil"
                                                     si el campo corresponde a un panel de b&uacute;squeda, "edi" si
                                                     corresponde a uno de un panel registro y "lis" si corresponde a
                                                     uno de un panel tabular.</em></span></p>
                              
                                            
                              <p><span class="emphasis"><em> <span class="bold"><strong>IMPORTANTE</strong></span>: No se recomienda usar en la
                                                     select la palabra clave "DISTINCT", ya que cuando el gestor de
                                                     base de datos es Oracle, gvHidra introduce una condici&oacute;n en el
                                                     WHERE (usando la pseudocolumna ROWNUM) para limitar el n&uacute;mero de
                                                     filas, y el resultado ser&iacute;a incorrecto ya que primero se aplica
                                                     el ROWNUM y despu&eacute;s el DISTINCT.</em></span></p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p>Opcionalmente se puede modificar el WHERE y el ORDERBY de
                                               la consulta anterior mediante los m&eacute;todos correspondientes. En
                                               el ejemplo vemos que se modifica el ORDERBY (l&iacute;nea 23), si
                                               quisi&eacute;ramos modificar el WHERE que gvHidra realiza por defecto
                                               utilizar&iacute;amos el siguiente m&eacute;todo <span class="bold"><strong>setWhereForSearchQuery()</strong></span>.
                              </p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p>El siguiente paso a realizar es dar la correspondencia
                                               entre los nombres de los campos (en la consulta) y los nombres
                                               en la plantilla (tpl). Cuando los datos son devueltos desde el
                                               panel a la capa de negocio, se necesita realizar una conversi&oacute;n,
                                               ya que los nombres no tienen porque coincidir (independizamos la
                                               presentaci&oacute;n de la fuente de datos). Para realizar este proceso
                                               (que hemos denominado matching) se debe utilizar un m&eacute;todo
                                               heredado llamado <span class="bold"><strong>addMatching</strong></span>.
                                               En la llamada a este m&eacute;todo le hemos de indicar 3 par&aacute;metros,
                                               que por este orden, corresponden a: nombre del campo en la TPL,
                                               nombre del campo en la consulta (el nombre del campo o el alias
                                               utilizado en la SELECT) y nombre de la tabla de la BD a la que
                                               pertenece. Para evitar problemas con los nombres de columnas
                                               entre distintos SGBD (oracle y postgresql por ejemplo), conviene
                                               usar siempre el 'as' en los nombres de columna, usando un alias
                                               preferiblemente en min&uacute;sculas.
                              </p>
                                          
                           </li>
                        </ul>
                     </div>
                     
                               
                     <p><span class="emphasis"><em>ATENCI&Oacute;N:</em></span> Todo lo expuesto se corresponde
                                  con un panel con s&oacute;lo <span class="emphasis"><em>dos modos</em></span> (tabular o
                                  registro). Si se tiene un panel con <span class="emphasis"><em>tres modos</em></span>
                                  (tabular-registro) se deben inicializar adem&aacute;s las siguientes
                                  propiedades:
                     </p>
                     
                               
                     <div class="itemizedlist">
                        <ul class="itemizedlist" type="disc">
                           <li class="listitem">
                                            
                              <p>Utilizar el m&eacute;todo <span class="bold"><strong>setPKForQueries()</strong></span> para indicar que campos
                                               forman parte de la clave primaria del mantenimiento. Estos
                                               campos son los que se utilizar&aacute;n para realizar el paso del modo
                                               de trabajo TABULAR al modo FICHA (registro).
                              </p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p>Inicializar la SELECT que contiene la consulta a realizar
                                               en el panel de FICHA con el m&eacute;todo <span class="bold"><strong>setSetSelectForEditQuery()</strong></span>. Es decir, la
                                               select que se lanzar&aacute; cuando tras seleccionar una o m&aacute;s tuplas
                                               en tabular y pulsamos el bot&oacute;n editar, nos pasar&aacute; a la
                                               FICHA.
                              </p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p>Opcionalmente se puede rellenar la WHERE y el ORDERBY de
                                               la edici&oacute;n con los m&eacute;todos correspondientes, <span class="bold"><strong>setWhereForEditQuery()</strong></span> y <span class="bold"><strong>setOrderByForEditQuery()</strong></span>.
                              </p>
                                          
                           </li>
                        </ul>
                     </div>
                     
                               
                     <p>Hasta aqu&iacute; tenemos una clase manejadora muy sencillita para
                                  una pantalla muy b&aacute;sica. Podemos tener la necesidad de que la
                                  interfaz sea un poco m&aacute;s din&aacute;mica, por ejemplo, tener listas y
                                  campos dependientes, explicado al final de este cap&iacute;tulo y en el
                                  cap&iacute;tulo 4 <a class="link" href="ch04.html#C4Avanzados">Elementos de pantalla
                                     avanzados</a>.
                     </p>
                     
                               
                     <p>Tambi&eacute;n es importante que el programador sepa de la existencia
                                  de algunos m&eacute;todos que puede sobrecargar para dotar de cierto
                                  comportamiento particular a las funciones gen&eacute;ricas de gvHidra. Por
                                  ejemplo, puede ser muy &uacute;til realizar validaciones previas a una
                                  operaci&oacute;n en la base de datos o especificar restricciones complejas
                                  en la WHERE de una consulta dependiendo de los valores seleccionados
                                  por el usuario. Estos m&eacute;todos son los explicados en el cap&iacute;tulo 1,
                                  punto 2 <a class="link" href="ch02s03.html#C2LogicaNegocio">L&oacute;gica de
                                     negocio</a>.
                     </p>
                     
                               
                     <p>Antes de pasar al siguiente paso vamos a dar un ejemplo de
                                  estos m&eacute;todos. Concretamente, vamos a forzar que cuando se inserten
                                  tuplas en nuestro ejemplo, la descripci&oacute;n aparezca siempre en
                                  may&uacute;sculas.
                     </p>
                     
                               
                     <div class="informalexample">
                                    <pre class="programlisting">public function <span class="bold"><strong>preInsertar</strong></span>($objDatos) 
{
   while($v_datos=$objDatos-&gt;<span class="bold"><strong>fetchTupla</strong></span>()) 
   {
      $v_datos['descEstado'] = strtoupper($v_datos['descEstado']);
      $objDatos-&gt;<span class="bold"><strong>setTupla</strong></span>($v_datos);
   }
   return 0;
}//Fin de PreInsertar</pre>
                                  </div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p>El siguiente paso es indicar al controlador que clase es la
                                  encargada de realizar las distintas operaciones del panel y donde se
                                  debe ir dependiendo del resultado de la operaci&oacute;n realizada. Para
                                  ello editamos el fichero <span class="bold"><strong>mappings.php</strong></span> (directorio include de la
                                  aplicaci&oacute;n) y a&ntilde;adimos las operaciones que correspondan a dicho
                                  panel.
                     </p>
                     
                               
                     <p>Para cada operaci&oacute;n necesitamos definir quien gestiona cada
                                  operaci&oacute;n, y donde debe redirigirse en cada posible respuesta de esa
                                  operaci&oacute;n, si es correcta o no la respuesta.
                     </p>
                     
                               
                     <p>Con la funci&oacute;n <span class="bold"><strong>_AddMapping</strong></span>
                                  indicamos que clase se encarga de gestionar cada operaci&oacute;n. De esta
                                  funci&oacute;n los par&aacute;metros que nos interesan son los dos primeros. Con
                                  el primero indicamos el nombre de la operaci&oacute;n, este nombre debe
                                  seguir el siguiente patr&oacute;n
                                  <span class="emphasis"><em>nombreClaseManejadora__nombreAccion</em></span>, los dos
                                  nombres est&aacute;n separados por dos subguiones. El segundo par&aacute;metro
                                  indica el nombre de la clase manejadora que tratar&aacute; las operaciones
                                  (en el ejemplo TinvEstados).
                     </p>
                     
                               
                     <p>En <span class="emphasis"><em>nombreAccion</em></span> nos podemos encontrar las
                                  siguientes palabras reservadas:
                     </p>
                     
                               
                     <div class="itemizedlist">
                        <ul class="itemizedlist" type="disc">
                           <li class="listitem">
                                            
                              <p><span class="bold"><strong>iniciarVentana</strong></span>: Acci&oacute;n
                                               que se lanzar&aacute; cuando se quiera incluir en un panel algo que
                                               tenga que ser cargado desde BD o alguna comprobaci&oacute;n previa a la
                                               carga de la ventana. Si se produce alg&uacute;n error (gvHidraError) en
                                               este momento nos redirigir&aacute; a la pantalla de entrada de la
                                               aplicaci&oacute;n (igep/views/aplicacion.php).
                              </p>
                              
                                            
                              <p>Por ejemplo poner en un panel de b&uacute;squeda una lista
                                               desplegable cargada desde BD.
                              </p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p><span class="bold"><strong>buscar</strong></span>: Acci&oacute;n que
                                               normalmente se dispara desde los paneles de filtro. Comprueba si
                                               la b&uacute;squeda tiene par&aacute;metros y lanza la SELECT definida en la
                                               clase manejadora para la b&uacute;squeda.
                              </p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p><span class="bold"><strong>operarBD</strong></span>: Acci&oacute;n que
                                               realiza las tres operaciones b&aacute;sicas de un mantenimiento:
                                               Insertar, Borrar y Modificar. Esta acci&oacute;n es exclusiva para
                                               trabajar con patrones de un solo modo, patr&oacute;n Tabular o patr&oacute;n
                                               Registro con o sin b&uacute;squeda.
                              </p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p><span class="bold"><strong>nuevo</strong></span>: Acci&oacute;n que se
                                               lanza al pulsar al bot&oacute;n de nuevo registro en un panel. Se
                                               utiliza para cargar listas u otros componentes, inicializar
                                               datos antes de que el usuario empiece la inserci&oacute;n de
                                               datos.
                              </p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p><span class="bold"><strong>editar</strong></span>: Acci&oacute;n que se
                                               lanza al pulsar el bot&oacute;n modificar de un panel, concretamente
                                               cuando nos encontramos en un Tabular-Registro. Se lanzar&aacute; la
                                               consulta definida para la edici&oacute;n en la clase manejadora
                                               correspondiente.
                              </p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p><span class="bold"><strong>insertar</strong></span>: Acci&oacute;n
                                               exclusiva para cuando se trabaja con un patr&oacute;n Tabular-Registro.
                                               Se lanza cuando se va a insertar el registro nuevo.
                              </p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p><span class="bold"><strong>modificar</strong></span>: Acci&oacute;n
                                               exclusiva para cuando se trabaja con un patr&oacute;n Tabular-Registro.
                                               Se lanza cuando se van a guardar las modificaciones hechas en el
                                               panel.
                              </p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p><span class="bold"><strong>borrar</strong></span>: Acci&oacute;n exclusiva
                                               para cuando se trabaja con un patr&oacute;n Tabular-Registro. Se lanza
                                               cuando se va a efectuar la operaci&oacute;n de borrado.
                              </p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p><span class="bold"><strong>cancelarTodo</strong></span>: Acci&oacute;n que,
                                               como su propio nombre indica, cancela todo, es decir, elimina el
                                               contenido de la &uacute;ltima consulta y de la &uacute;ltima edici&oacute;n.
                              </p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p><span class="bold"><strong>cancelarEdicion</strong></span>: En este
                                               caso, esta acci&oacute;n solamente elimina el contenido de la &uacute;ltima
                                               edici&oacute;n.
                              </p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p><span class="bold"><strong>recargar</strong></span>: Acci&oacute;n
                                               exclusiva para ventanas maestro-detalle. Acci&oacute;n que se lanza al
                                               paginar en un maestro para recargar los detalles.
                              </p>
                                          
                           </li>
                        </ul>
                     </div>
                     
                               
                     <p>Ahora tenemos que definir las redirecciones dependientes de
                                  las respuestas a la operaci&oacute;n, para ello tenemos el m&eacute;todo <span class="bold"><strong>_AddForward</strong></span>. Este m&eacute;todo necesita de tres
                                  par&aacute;metros, siendo el primero el mismo que para la funci&oacute;n
                                  _AddMapping, el segundo par&aacute;metro ser&aacute; una palabra clave que
                                  identifica la respuesta a la operaci&oacute;n, y el tercer par&aacute;metro ser&aacute;
                                  la ruta donde se redirigir&aacute; la respuesta, normalmente ser&aacute; a un
                                  fichero de la presentaci&oacute;n del directorio
                                  <span class="emphasis"><em>views</em></span>.
                     </p>
                     
                               
                     <p>Las <span class="emphasis"><em>acciones gen&eacute;ricas</em></span>, que corresponden
                                  con las acciones enumeradas antes, tienen unos retornos fijos que
                                  depender&aacute;n del resultado de la operaci&oacute;n, las palabras clave de
                                  respuesta para estas acciones son <span class="bold"><strong>gvHidraSuccess</strong></span>, <span class="bold"><strong>gvHidraError</strong></span>, <span class="bold"><strong>gvHidraNoData</strong></span>, significando: todo correcto,
                                  ha habido error, no hay datos, respectivamente. Las
                                  <span class="emphasis"><em>acciones particulares</em></span> tendr&aacute;n tantos retornos
                                  como el programador crea conveniente. A continuaci&oacute;n mostramos la
                                  parte del mappings que corresponder&iacute;a a nuestro ejemplo:
                     </p>
                     
                               
                     <div class="informalexample">
                                    <pre class="programlisting">&lt;?php

class ComponentesMap extends gvHidraMaps 
{
        /**
         *      constructor function
         *      @return void
         */
  
        function ComponentesMap () 
        {
            parent::gvHidraMaps();
            ...
            $this-&gt;<span class="bold"><strong>_AddMapping</strong></span>('TinvEstados__<span class="bold"><strong>iniciarVentana</strong></span>', 'TinvEstados', '', 'IgepForm', 0);
            $this-&gt;<span class="bold"><strong>_AddForward</strong></span>('TinvEstados__iniciarVentana', '<span class="bold"><strong>gvHidraSuccess</strong></span>', 'index.php?view=views/tablasMaestras/p_estados.php');
            //
            $this-&gt;_AddForward('TinvEstados__iniciarVentana', '<span class="bold"><strong>gvHidraError</strong></span>', 'index.php?view=igep/views/aplicacion.php');

            $this-&gt;_AddMapping('TinvEstados__<span class="bold"><strong>buscar</strong></span>', 'TinvEstados', '', 'IgepForm', 0);
            $this-&gt;_AddForward('TinvEstados__buscar', 'gvHidraSuccess', 'index.php?view=views/tablasMaestras/p_estados.php&amp;panel=listar');
            $this-&gt;_AddForward('TinvEstados__buscar', 'gvHidraError', 'index.php?view=views/tablasMaestras/p_estados.php&amp;panel=buscar');
            $this-&gt;_AddForward('TinvEstados__buscar', 'gvHidraNoData', 'index.php?view=views/tablasMaestras/p_estados.php&amp;panel=buscar');

            $this-&gt;_AddMapping('TinvEstados__<span class="bold"><strong>operarBD</strong></span>', 'TinvEstados', '', 'IgepForm', 0);
            $this-&gt;_AddForward('TinvEstados__operarBD', 'gvHidraSuccess', 'index.php?view=views/tablasMaestras/p_estados.php&amp;panel=listar');
            $this-&gt;_AddForward('TinvEstados__operarBD', 'gvHidraError', 'index.php?view=views/tablasMaestras/p_estados.php&amp;panel=listar');
            $this-&gt;_AddForward('TinvEstados__operarBD', '<span class="bold"><strong>gvHidraNoData</strong></span>', 'index.php?view=views/tablasMaestras/p_estados.php&amp;panel=buscar');
            ...
         }
}</pre>
                                  </div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p>A continuaci&oacute;n debemos crear un archivo php en el directorio
                                  <span class="bold"><strong>views</strong></span> que controle la presentaci&oacute;n.
                                  En &eacute;l se definen las asignaciones de los datos a la plantilla (tpl).
                                  Si se trata de un comportamiento gen&eacute;rico, hay que instanciar la
                                  clase <span class="bold"><strong>IgepPantalla</strong></span> (l&iacute;nea 3) que
                                  define el comportamiento general de una pantalla. En la l&iacute;nea 5 se
                                  carga la clase <span class="bold"><strong>IgepPanel</strong></span>, que nos
                                  permite tener accesibles las funciones de acceso al panel, pas&aacute;ndole
                                  dos par&aacute;metros, el primero ser&aacute; el nombre de la <span class="emphasis"><em>clase
                                        manejadora</em></span> que corresponde a ese panel, y el segundo,
                                  <span class="emphasis"><em>smty_datosTabla</em></span>, es el nombre de una variable
                                  smarty que se habr&aacute; definido en la tpl correspondiente al panel, en
                                  el siguiente punto se explica. Una vez aqu&iacute; tenemos que activar las
                                  pesta&ntilde;as laterales que nos permitir&aacute;n cambiar de modo (en el ejemplo
                                  b&uacute;squeda/tabular), esto lo haremos con el m&eacute;todo <span class="bold"><strong>activarModo</strong></span>, al que se le pasan dos
                                  par&aacute;metros, el primero es el panel al que har&aacute; referencia ("fil"
                                  -&gt; panel b&uacute;squeda, "lis"-&gt; panel tabular, "edi"-&gt; panel
                                  registro), y el segundo par&aacute;metro es nombre de un par&aacute;metro que
                                  indica el estado de la pesta&ntilde;a ("estado_fil"-&gt;pesta&ntilde;a filtro,
                                  "estado_lis"-&gt;pesta&ntilde;a tabular, "estado_edi"-&gt;pesta&ntilde;a
                                  registro), si est&aacute; activa o no.
                     </p>
                     
                               
                     <p>Una vez definido todo tenemos que agregar el panel a la
                                  ventana, esto lo haremos con el m&eacute;todo <span class="bold"><strong>agregarPanel()</strong></span>. Y por &uacute;ltimo, ya solo nos
                                  queda mostrar la tpl en pantalla, para ello utilizamos el m&eacute;todo
                                  <span class="bold"><strong>display()</strong></span>, que es un m&eacute;todo propio
                                  de smarty, siendo la variable $s una instancia de la clase
                                  Smarty_Phrame.
                     </p>
                     
                               
                     <p>A continuaci&oacute;n mostramos un fichero de ejemplo de una ventana
                                  con un panel de dos modos:
                     </p>
                     
                               
                     <div class="informalexample">
                                    <pre class="programlisting">&lt;?php
//Creamos una pantalla
$comportamientoVentana = new <span class="bold"><strong>IgepPantalla</strong></span>();

//Creamos un panel
$panel = new <span class="bold"><strong>IgepPanel</strong></span>('TinvEstados',"smty_datosTabla");

//Activamos las pesta&ntilde;as de los modos que tendremos en el panel
$panel-&gt;<span class="bold"><strong>activarModo</strong></span>("fil","estado_fil");
$panel-&gt;activarModo("lis","estado_lis");

//Agregamos el panel a la ventana
$comportamientoVentana-&gt;<span class="bold"><strong>agregarPanel</strong></span>($panel);

//Realizamos el display
$s-&gt;<span class="bold"><strong>display</strong></span>('tablasMaestras/p_estados.tpl');
?&gt;</pre>
                                  </div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p>Ahora vamos a dise&ntilde;ar la plantilla (tpl) de la pantalla en el
                                  directorio plantillas de la aplicaci&oacute;n. En la tpl dise&ntilde;aremos como
                                  quedar&aacute; al final la pantalla, con una combinaci&oacute;n de plugins propios
                                  de gvHidra, etiquetas propias de smarty y etiquetas html haremos el
                                  dise&ntilde;o. Las plantillas tendr&aacute;n todas una estructura com&uacute;n a partir
                                  de la cual podremos ir particularizando nuestra pantalla.
                     </p>
                     
                               
                     <p>En ella creamos los componentes necesarios para nuestra
                                  pantalla, ajustando todos los par&aacute;metros de cada plugin con los
                                  nombres dados en la clase manejadora y las acciones correspondientes
                                  del mappings. Lo veremos m&aacute;s detallado en el punto 3 <a class="link" href="ch03s04.html#crearPantallas">Dise&ntilde;o de pantalla con
                                     smarty/plugins</a>.
                     </p>
                     
                               
                     <p>Precauciones a tener en cuenta a la hora de dise&ntilde;ar una
                                  tpl:
                     </p>
                     
                               
                     <div class="itemizedlist">
                        <ul class="itemizedlist" type="disc">
                           <li class="listitem">
                                            
                              <p>Los identificadores de campos pueden estar en cualquier
                                               combinaci&oacute;n de may&uacute;sculas y min&uacute;sculas, aunque no debe haber dos
                                               donde s&oacute;lo cambie esto (es decir, case-insensitive).
                              </p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p>Hay que evitar poner atributos o tags innecesarios, ya que
                                               eso se traduce en una p&aacute;gina HTML de mayor peso. Por ejemplo, si
                                               una columna es oculta, no tiene sentido indicar su tama&ntilde;o,
                                               obligatoriedad, ...
                              </p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p>Los car&aacute;cteres especiales como acentos o e&ntilde;es conviene
                                               ponerlos usando entidades <a class="ulink" href="http://www.etsit.upm.es/%7Ealvaro/manual/manual.html#6" target="_top">html</a>,
                                               para que no hay problemas con la codificaci&oacute;n.
                              </p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p>No conviene usar el car&aacute;cter '_' en las tpls. Mejor darle
                                               otro nombre mediante alias en la select.
                              </p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p>Cuando en la tpl exista una ficha ({CWFicha}) habr&aacute; que
                                               distribuir los campos dentro de ella. En principio si son pocos
                                               campos con un simple salto de l&iacute;nea (&lt;br /&gt;) se podr&iacute;an
                                               dibujar, pero cuando se complica m&aacute;s se crear&aacute; una tabla con los
                                               par&aacute;metros que se indican en el ejemplo, y luego distribuir los
                                               campos en celdas.
                              </p>
                                          
                           </li>
                           <li class="listitem">
                                            
                              <p>Delante del primer campo de la celda no debemos poner
                                               ning&uacute;n espacio en blanco (&amp;nbsp;)
                              </p>
                              
                                            
                              <div class="informalexample">
                                                 
                                 
                                                 <pre class="programlisting">&lt;tr&gt;
    &lt;td&gt;
         {CWCampoTexto ...
    &lt;/td&gt;
&lt;/tr&gt;
</pre>
                                               </div>
                              
                                            
                              <p>Solamente se pondr&aacute; en el caso de que se sit&uacute;en dos campos
                                               en una misma celda; as&iacute; dejar&iacute;amos un espacio entre ellos.
                                               Ejemplo:
                              </p>
                              
                                            
                              <div class="informalexample">
                                                 
                                 
                                                 <pre class="programlisting">&lt;tr&gt;
    &lt;td&gt;
       {CWCampoTexto ...}&amp;nbsp;{CWCampoTexto ...}
    &lt;/td&gt;
&lt;/tr&gt;</pre>
                                               </div>
                                          
                           </li>
                        </ul>
                     </div>
                     
                               
                     <p>Ejemplo completo de una plantilla, hay que destacar que es
                                  importante <span class="bold"><strong>no repetir identificadores de
                                        elementos de pantalla</strong></span> (nombres de los campos) dentro de
                                  una misma TPL, como vemos en el ejemplo, los conceptos estado y
                                  descripci&oacute;n estado corresponden a los campos filCodigoEstado y
                                  filDescEstado
                     </p>
                     
                               
                     <div class="informalexample">
                                    
                        
                                    <pre class="programlisting">{CWVentana tipoAviso=$smty_tipoAviso codAviso=$smty_codError descBreve=$smty_descBreve textoAviso=$smty_textoAviso onLoad=$smty_jsOnLoad}
 {CWBarra usuario=$smty_usuario codigo=$smty_codigo customTitle=$smty_customTitle}
  {CWMenuLayer name="$smty_nombre" cadenaMenu="$smty_cadenaMenu"}
 {/CWBarra}

 {CWMarcoPanel conPestanyas="true"}

 &lt;!--*********** MODO fil ******************--&gt;
   {CWPanel id="fil" action="buscar" method="post" estado="$estado_fil" claseManejadora="TinvEstados"}
     {CWBarraSupPanel titulo="Estados de los bienes"}
       {CWBotonTooltip imagen="04" titulo="Limpiar campos" funcion="limpiar" actuaSobre="ficha"}
     {/CWBarraSupPanel}
     {CWContenedor}
       {CWFicha}
         &lt;br /&gt;
         {CWCampoTexto nombre="filCodEstado" size="3" editable="true" textoAsociado="C&oacute;digo" dataType=$dataType_TinvEstados.filCodEstado}
         &lt;br /&gt;&lt;br /&gt;
         {CWCampoTexto nombre="filDescEstado" size="10" editable="true" textoAsociado="Descripci&oacute;n" dataType=$dataType_TinvEstados.filCodigoEstado}
         &lt;br /&gt;&lt;br /&gt;
       {/CWFicha}
     {/CWContenedor}
     {CWBarraInfPanel}
       {CWBoton imagen="50" texto="Buscar" class="boton" accion="buscar" }
     {/CWBarraInfPanel}
   {/CWPanel}


 &lt;!-- ****************** MODO lis ***********************--&gt;
   {CWPanel id="lis" tipoComprobacion="envio" action="operarBD" method="post" estado="$estado_lis" claseManejadora="TinvEstados"}
     {CWBarraSupPanel titulo="Estados de los bienes"}
       {CWBotonTooltip imagen="01" titulo="Insertar registros" funcion="insertar" actuaSobre="tabla"}
       {CWBotonTooltip imagen="02" titulo="Modificar registros" funcion="modificar" actuaSobre="tabla"}
       {CWBotonTooltip imagen="03" titulo="Eliminar registros" funcion="eliminar" actuaSobre="tabla"}
     {/CWBarraSupPanel}
     {CWContenedor}
       {CWTabla conCheck="true" conCheckTodos="true" id="Tabla1" datos=$smty_datosTabla}
         {CWFila tipoListado="false"}
           {CWCampoTexto nombre="lisCodEstado" textoAsociado="C&oacute;d. Estado." editable="nuevo" size="2" dataType=$dataType_TinvEstados.lisCodEstado}
           {CWCampoTexto nombre="lisDescEstado" textoAsociado="Desc. Estado." editable="true" size="12" dataType=$dataType_TinvEstados.lisDescEstado}
         {/CWFila}
         {CWPaginador enlacesVisibles="3"}
       {/CWTabla}
     {/CWContenedor}
     {CWBarraInfPanel}
       {CWBoton imagen="41" texto="Guardar" class="boton" accion="guardar"}
       {CWBoton imagen="42" texto="Cancelar" class="boton" accion="cancelar" action="cancelarTodo"}
     {/CWBarraInfPanel}
   {/CWPanel}

 &lt;!-- ****************** PESTA&Ntilde;AS ************************--&gt;
   {CWContenedorPestanyas}
     {CWPestanya tipo="fil" estado=$estado_fil}
     {CWPestanya tipo="lis" estado=$estado_lis}
   {/CWContenedorPestanyas}
 {/CWMarcoPanel}
{/CWVentana}</pre>
                                  </div>
                             
                  </li>
                  <li class="listitem">
                               
                     <p>Registramos el fichero de actions con la nueva clase en el
                                  fichero <span class="bold"><strong>include.php</strong></span> de la
                                  aplicaci&oacute;n que se encuentra en el directorio
                                  <span class="emphasis"><em>include</em></span>. Podemos hacerlo con un include o
                                  usando la carga din&aacute;mica de clases explicada en el cap&iacute;tulo 4 punto
                                  <a class="link" href="ch04s05.html#C4CargaDinamica">Carga din&aacute;mica de
                                     clases</a>.
                     </p>
                             
                  </li>
                  <li class="listitem">
                               
                     <p>Finalmente incluimos la ventana correspondiente en
                                  <span class="emphasis"><em>include/menuModulos.xml</em></span> que contiene las
                                  entradas de men&uacute;.
                     </p>
                     
                               
                     <div class="informalexample">
                                    
                        
                                    <pre class="programlisting">&lt;opcion titulo="Estados" descripcion="Mantenimiento de estados de bienes" url="phrame.php?action=TinvEstados__iniciarVentana"/&gt;</pre>
                                  </div>
                             
                  </li>
               </ol>
            </div>
            
                  
            <p>Una vez cubiertos estos pasos se puede probar la ventana entrando
                     a la aplicaci&oacute;n. Suerte!
            </p>
                
         </div>
           
      </div>
      <div class="navfooter">
         <hr>
         <table width="100%" summary="Navigation footer">
            <tr>
               <td width="40%" align="left"><a accesskey="p" href="ch03.html">Anterior</a>&nbsp;
               </td>
               <td width="20%" align="center"><a accesskey="u" href="ch03.html">Subir</a></td>
               <td width="40%" align="right">&nbsp;<a accesskey="n" href="ch03s03.html">Siguiente</a></td>
            </tr>
            <tr>
               <td width="40%" align="left" valign="top">Cap&iacute;tulo 3. Elementos b&aacute;sicos&nbsp;</td>
               <td width="20%" align="center"><a accesskey="h" href="indice.html">Inicio</a></td>
               <td width="40%" align="right" valign="top">&nbsp;3.3. Men&uacute; de una aplicaci&oacute;n</td>
            </tr>
         </table>
      </div>
   </body>
</html>